<template>
  <div>
    <el-dialog
      title="平面图标记"
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <!-- @mousewheel.prevent="rollImg" -->
      <div class="caritem">
        <div class="caritem_div">
          <div
            class="div_box"
            :style="{
              transform: `scale(${scale}) `,
              left: `${x}px`,
              top: `${y}px`,
            }"
            @wheel="handleWheel"
            @mousedown.stop="handleMouseDown"
            @mousemove="handleMouseMove"
            @mouseup="handleMouseUp"
          >
            <img
              class="elImage"
              :src="image"
              @click="setPoint"
              ref="imgDiv"
              @mousedown.prevent
            />
            <!-- <i class="el-icon-location icon" :style="'top:' + top + 'px;' + 'left:' + left + 'px;'"
                            v-if="flag"></i> -->
            <i
              class="icon"
              :class="iconclass()"
              v-if="flag"
              @mousedown.stop="handleMouseDown2($event)"
              @mousedown.prevent
              :style="'top:' + top + 'px;' + 'left:' + left + 'px;'"
            ></i>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button size="small" @click="submit" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqUpdateMark, reqDetectorUpdate } from "@api/api.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

export default {
  mixins: [loadMore],
  props: ["parentDeviceInfo", "detectorInfo"],
  data() {
    return {
      dialogVisible: false,
      left: 0,
      top: 0,
      img: require("@assets/images/account_bg.png"),
      flag: false,
      image: "",

      // 放大缩小
      scale: 1, // 初始缩放比例为1
      scaleStep: 0.1, // 每次滚动缩放的步长

      // 鼠标拖动
      x: 0, // div的初始x坐标
      y: 0, // div的初始y坐标
      dragging: false, // 是否正在拖动
      startX: 0, // 鼠标按下时的x坐标
      startY: 0, // 鼠标按下时的y坐标

      dragging2: false, // 是否正在拖动
      startX2: 0, // 鼠标按下时的x坐标
      startY2: 0, // 鼠标按下时的y坐标
    };
  },
  watch: {
    dialogVisible(e) {
      console.log(this.detectorInfo, "detectorInfo");
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 鼠标拖拽移动事件
    handleMouseDown2(event) {
      this.dragging2 = true;
      // 拖拽时考虑当前的缩放比例，并将鼠标的坐标转换为缩放后的坐标。
      this.startX2 =
        (event.clientX - this.x - this.left * this.scale) / this.scale;
      this.startY2 =
        (event.clientY - this.y - this.top * this.scale) / this.scale;
      // 将 mousemove 和 mouseup 事件绑定到 document 可解决鼠标移动太快导致拖拽断掉的问题
      document.addEventListener("mousemove", this.handleMouseMove2);
      document.addEventListener("mouseup", this.handleMouseUp2);
    },

    handleMouseMove2(event) {
      if (!this.dragging2) return;
      const newLeft =
        (event.clientX - this.x - this.startX2 * this.scale) / this.scale;
      const newTop =
        (event.clientY - this.y - this.startY2 * this.scale) / this.scale;
      this.left = Math.round(newLeft);
      this.top = Math.round(newTop);
    },

    handleMouseUp2() {
      this.dragging2 = false;
      // 移除 document 上的事件监听
      document.removeEventListener("mousemove", this.handleMouseMove2);
      document.removeEventListener("mouseup", this.handleMouseUp2);
    },
    // 标记点图片
    iconclass() {
      let pic = "iconfont shebeiguanli2";
      if (this.detectorInfo) {
        if (this.detectorInfo.productName == "门磁") {
          pic = "iconfont menci";
        } else if (this.detectorInfo.productName == "烟感探测报警器") {
          pic = "iconfont yangan";
        } else if (this.detectorInfo.productName == "红外探测器") {
          pic = "iconfont rentihongwai";
        } else if (this.detectorInfo.productName == "智能燃气报警器") {
          pic = "iconfont reshuiqi";
        }
      }
      return pic;
    },
    // 鼠标拖动
    handleMouseDown(event) {
      this.dragging = true;
      this.startX = event.clientX - this.x;
      this.startY = event.clientY - this.y;
    },
    handleMouseMove(event) {
      if (!this.dragging) return;
      this.x = event.clientX - this.startX;
      this.y = event.clientY - this.startY;
    },
    handleMouseUp() {
      this.dragging = false;
    },
    // 放大缩小
    handleWheel(event) {
      event.preventDefault(); // 阻止默认事件，防止页面滚动
      const delta = event.deltaY * -1; // 获取滚轮滚动的方向
      this.scale += delta > 0 ? this.scaleStep : -this.scaleStep; // 根据滚动方向调整缩放比例
      // 限制缩放比例的范围，防止过大或过小
      this.scale = Math.min(Math.max(0.1, this.scale), 5);
    },
    // 平面图赋值
    getimage(image) {
      this.image = image;
    },
    // 已标记展示标记点
    getMark(mark) {
      // console.log(mark);
      this.left = mark.slice(0, mark.indexOf(","));
      this.top = mark.slice(mark.indexOf(",") + 1);
      this.flag = true;
    },
    //绘制标记
    setPoint(e) {
      if (this.flag) return;
      // console.log(e);
      e = e || window.event;
      //   let x = e.offsetX || e.layerX;
      //   let y = e.offsetY || e.layerY;
      //   let obj = {x: x + 'px',y: y + 'px',showModal:false}
      //   console.log(obj);
      this.left = e.offsetX - 10 || e.layerX - 10;
      this.top = e.offsetY - 17 || e.layerY - 17;
      this.flag = true;
    },

    // 点击绑定
    async submit() {
      if (!this.flag) return this.$modal.notifyWarning("请先标记点!");
      if (this.detectorInfo.id) {
        // 编辑
        const {
          id,

          buildingId,
          floorId,
          spaceId,

          detectorType,
          detectorTypeName,
          deviceCode,
          circuitNumber,
          nodeNumber,
          detectorName,
          remark,
        } = this.detectorInfo;

        const res = await reqDetectorUpdate({
          mark: this.left + "," + this.top,

          parentId: this.parentDeviceInfo.id,
          id,

          buildingId,
          floorId,
          spaceId,

          detectorType,
          detectorTypeName,
          deviceCode,
          circuitNumber,
          nodeNumber,
          detectorName,
          remark,
        });
        // console.log(res);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("标记成功!");
        this.closeDialog();
        this.$parent.getDataList();
        return;
      }
      // 新增
      this.dialogVisible = false;
      let mark = this.left + "," + this.top;
      this.$emit("clickMark", mark);
    },
    // 点击关闭弹框
    closeDialog() {
      this.dialogVisible = false;
      this.left = 0;
      this.top = 0;
      this.flag = false;

      this.scale = 1; // 初始缩放比例为1
      this.scaleStep = 0.1; // 每次滚动缩放的步长
      this.x = 0; // div的初始x坐标
      this.y = 0; // div的初始y坐标
      this.dragging = false; // 是否正在拖动
      this.startX = 0; // 鼠标按下时的x坐标
      this.startY = 0; // 鼠标按下时的y坐标
    },
  },
};
</script>

<style lang="less" scoped>
.caritem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .caritem_div {
    width: 800px;
    height: 450px;
    position: relative;
  }
}

.div_box {
  margin: 0 auto;
  width: 800px;
  height: 450px;
  position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);

  .elImage {
    cursor: move;
    width: 100%;
    height: 100%;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
  }

  .icon {
    position: absolute;
    border-radius: 50%;
    font-size: 20px;
    width: 34px;
    height: 34px;
    background-color: #7367f0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 4px 2px #ccc;
  }
}

::v-deep .el-dialog {
  height: 80% !important;
  max-height: 80vh;
  width: 60% !important;
}
</style>